require('./PageCheck.styl');
var classNames = require('classnames');
// const addClass2 = false;
const {List,Scroller,NavBar,SearchBar,Toast, Button,Avatar,Context,Boxs,Grid,Icon,SwitchField,Group,Tab,Calendar,DatetimeField} = SaltUI;
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const png = require('../../images/11.jpg');
const selectPng = require('../../images/22.png');
const timeStart = (new Date().getYear()+ 1900)+'.'+(new Date().getMonth()+1)+'.'+1;
const timeToday = (new Date().getYear()+ 1900)+'.'+(new Date().getMonth()+1)+'.'+new Date().getDate();
const timeSpace = (new Date().getYear()+ 1900)+'.'+(new Date().getMonth()+1)+'.'+(new Date().getDate()-15);
let HBox = Boxs.HBox;
let Box = Boxs.Box;

//通过用户操作或者webapi触发消息
class Check extends React.Component {
// static defaultProps = {
//     DateObject:new Date()
// };
    constructor(props) {
        super(props);
        this.state = {
            loaded:false,
            content:{},
            error:false,
            date:new Date(),
            show:false,
            locale:'zh-cn',
            selected:false,//搜索异常按钮图片
            searchStartTime:timeSpace,
            searchEndTime:timeToday,
            value: null,
            className: '',
            title: '考勤系统',
            isShow: false,
            rightText:' ',
            active:0
        };
    }
    getTimeInterval(){
  
        return (this.state.date.getDate()==1)?('('+timeStart+')'):'('+(timeStart+'-'+timeToday)+')';
    }
    getMonthLen(year,month){
        let nextMonth = new Date(year,month+1,1); //获取下个月的第一天
        nextMonth.setHours(nextMonth.getHours() - 3); //由于获取的天是0时,所以减去3小时则可以得出该月的天数
        return nextMonth.getDate(); //返回当天日期
    }
    tick() {
        this.setState({
            date: new Date()
        });
    }
//日期按钮点击
    handleClickDate(){

        console.log('日期被点击了');
        let t = this;
        t.setState({
            show: true
        });
    }
    onCloseCalendar() {
        let t = this;
        t.setState({
            show: false
        });
    }
    handleCalendarData(values) {
    //#TODO限制用户选择时间的截止日期为今天登陆时间
       console.log(JSON.stringify(values));
       let date1 = values.endDate;
       let date = new Date(date1);
       let month = date.getMonth()+1;
       let day = date.getDate();
       let year =date.getFullYear();
       console.log(month+'-'+year );
       let endTime = year+'-'+month+'-'+day;
       date1 = values.startDate;
       date = new Date(date1);
       month = date.getMonth()+1;
       day = date.getDate();
       year =date.getFullYear();
       let startTime = year+'-'+month+'-'+day;
        let t = this;
        t.setState({
            show: false,
            searchEndTime:endTime,
            searchStartTime:startTime
        });
    }
    handleClickImg(){
        let t = this;
        t.setState({
            selected:!t.state.selected
        });
    }
    handleClickSearch(){
        console.log('搜索内容'+this.state.searchStartTime+','+this.state.searchEndTime);
    }
    handleClick(workNo) {
        Toast.show({
            type: 'loading',
            content: 'Loading'
        });
        //Action触发时，需要指定actionName
        Actions.fetchData({
            workNo: workNo
        }, function(data) {
            // Toast.hide();
            // console.log(JSON.stringify(data));
        });
    }
    //显示为日常班还是公休
    getDay(date){
          let week=''; 
          let DateObject =new Date(date.replace(/-/g, "/"));
          if(DateObject.getDay()==0||6) week="公休"
          if(DateObject.getDay()==1||2||3||4||5) week="日常班"
          return week;
      }
     //获取小时时间 
    getTime(values){
          let D = new Date(values);
          let h = D.getHours();
          let i = D.getMinutes();
          let s = D.getSeconds();
          let  startTime = h+':'+i+':'+s;
          return startTime;
      }
      //获取日期格式
    getDate(values) {
    //#TODO限制用户选择时间的截止日期为今天登陆时间
          let date = new Date(values);
          let month = date.getMonth()+1;
          let day = date.getDate();
          let year =date.getFullYear();
          let startDate= year+'-'+month+'-'+day;
          return startDate;
    }
//     handleChange1(value) {
//     this.setState({
//         value: value
//     });
// }
 handleChange() {
       
    }
    // handleChange(obj) {
    //     this.setState({
    //         active: obj.active
    //     });
    //    console.log("切换");
    //    console.log({
    //     active: obj.active,
    //     preActive: obj.preActive,
    //     data:obj.data,
    //     e:obj.e
    // });
    // }
    handleOnLeftClick(){
        self.location.hash='home';
    }
// // 新值和事件对象
// handleChange(obj) {
//    var t = this;
  
//     console.log({
//         active: obj.active,
//         preActive: obj.preActive,
//         data:obj.data,
//         e:obj.e
//     });
     
//     console.log(JSON.stringify(obj.data).customKey1);
// }
   
    render() {
        let t =this;
        return (
            
            //必须需要只有一个顶部标签
            <div>             
               
                <div className="t-FAC t-PT10 ">
                     本月小结
                    <div className="t-FAC t-PT10">{t.getTimeInterval()}</div>
                </div> 
                <div className="t-PT10">
                    <HBox>
                        <Box flex={1} className="button-border t-FAC" >
                            <span >加班累计结余x小时</span>
                        </Box>
                        <Box flex={1} className="button-border t-FAC">
                            <span>本月加班结余x小时</span>
                        </Box>                       
                    </HBox>
                    <HBox>
                        <Box flex={1} className="button-border t-FAC">
                            <div>本月出勤异常x次</div>
                        </Box>
                        <Box flex={1} className="button-border t-FAC">
                            <span>本月钉钉异常x次</span>
                        </Box>
                    </HBox>
                </div>
                <div >
                     <div className="t-FS16 t-MT10 t-FAC">自助查询</div>
                   
                     <div className="t-FAL t-MT10">     
                          <div> 
                              <span className='search t-ML10'>开始日期<span ><img  src={png} width={16} onClick={t.handleClickDate.bind(t)}/></span></span>
                             
                              <span className='search t-ML4'>结束日期<img  className='' src={png} width={16} onClick={t.handleClickDate.bind(t)}/></span>
                           
                              <span className='search1 t-ML4'>
                               
                              <img src={t.state.selected?selectPng:png} width={16} onClick={t.handleClickImg.bind(t)}/><span className='t-ML6'>仅搜索异常</span></span>
                              <span className='search-button t-ML10' onClick={t.handleClickSearch.bind(t)}>搜索</span>
                          </div>
                           

                            <Tab  >
                                 <Tab.Item title="签到考勤详情" data={{"customKey1": "自定义值1", "customKey2": "自定义值2"}}>
                                     <div className="t-ML10 t-MT6">   
                                         <span className="widthRatio t-PL20" style={{width:(screen.width-10-10)/4,display:'inline-block'}}>日期</span>
                                         <span className="widthRatio t-PL10"style={{width:(screen.width-10-10)/4,display:'inline-block'}}>班次</span>
                                         <span className="widthRatio t-PL10"style={{width:(screen.width-10-10)/4,display:'inline-block'}}>上班</span>
                                         <span className="widthRatio t-PL20"style={{width:(screen.width-10-10)/4,display:'inline-block'}}>下班</span>
                                     </div>
                                     <div className="tLH1_5 t-P10">  
                                         <Scroller className='widthRatio1'>
                                             <Group>
                                                 <Group.List lineIndent={0} itemIndent={0}>
                                                          {
                                                             t.state.content.list ?
                                                             t.state.content.list.map(function(item,index) {
                                    
                                                            const addClass2 = (item.timeResultOnDuty.indexOf('Late')>=0?true:false);                                                 
                                                                  return (
                                                                            <div className="t-LH44 t-FBH t-FBAC" onClick={t.handleClick.bind(t, item.workNo)}>
                                    
                                                                                <div className="t-FB1 t-PL10">
                                                                                   
                                                                                    <span className='' style={{width:(screen.width-10-10)/4,display:'inline-block',marginLeft:'-10px'}}>{t.getDate(item.workDate)}</span>
                                                                                    <span className=' 'style={{width:(screen.width-10-10)/4,display:'inline-block'}}>{t.getDay(t.getDate(item.workDate))}</span>
                                                                                    <span className= {classNames('' ,{'textColor':addClass2})}style={{width:(screen.width-10-10)/4,display:'inline-block'}}> {t.getTime(item.offCheckTime)}</span>
                                                                                    <span className= ''style={{width:(screen.width-10-10)/4,display:'inline-block',marginRight:'-10px'}} > {t.getTime(item.userCheckTime)}</span>
                                                                                    
                                                                                </div>
                                                                             </div>
                                                                         )
                                                                         }) : 
                                                            (
                                                                <div className="t-PL10 t-LH44 t-FBH t-FBAC t-FBJC">
                                                                    {t.state.error ? 'Error' : 'No data'}
                                                                </div>
                                                            )
                                                         }
                                                       </Group.List>
                                             </Group>
                                         </Scroller>  
                                     </div>
                                </Tab.Item>
                                <Tab.Item title="钉钉办公详情">
                                    <div className="t-ML10 t-MT6">   
                                        <span className="widthRatio t-PL20" style={{width:(screen.width-10-10)/4,display:'inline-block'}}>日期</span>
                                        <span className="widthRatio t-PL10"style={{width:(screen.width-10-10)/4,display:'inline-block'}}>班次</span>
                                        <span className="widthRatio t-PL10"style={{width:(screen.width-10-10)/4,display:'inline-block'}}>钉钉</span>
                                        <span className="widthRatio t-PL20"style={{width:(screen.width-10-10)/4,display:'inline-block'}}>信息不报</span>
                                    </div>
                                    <div className="t-LH1_5 t-P10">
                                          发展注入巨大的能量，2014年移动互联网...
                                    </div>
                                </Tab.Item>
                             </Tab>                       
                                  
                   </div>
                </div>
            </div>
           );
    }

    componentWillMount() {
    }

    componentDidMount() {
         this.handleClick('1234');
         //给组件添加属性
          this.timerID = setInterval(
                 () => this.tick(),
                 1000
          );
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        clearInterval(this.timerID); 
    }
}
//手动监听，手动删除监听，还有手动触发UI更新

//reactMixin.onClass(Check, Reflux.connect(Store));
reactMixin.onClass(Check, Reflux.connect(Store));
module.exports = Check;
